<template>
	<!-- 设置 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="设置" />
		<view class="main">
			<view class="item">
				<view class="title">用户头像</view>
				<image :src="userInfo.avatar" class="avatar" @click="openImage"></image>
			</view>
			<view class="line"></view>
			<view class="item" url="./essentialInformation">
				<view class="title">用户昵称</view>
				<input class="input" type="text" v-model="userInfo.user_name" />
			</view>
			<view class="line"></view>
			<view class="item" url="/pages/mine/setup/platformIntroduction">
				<view class="title">手机号码</view>
				<view class="title">{{phoneNumber}}</view>
			</view>
			<!-- <view class="line"></view> -->
			<!-- <view class="item" url="/pages/mine/member/memberAgreement">
				<view class="title">微信</view>
				<text v-if="userInfo.open_id">已绑定</text>
				<view class="status" v-else @click="bindwechat">
					<text>未绑定</text>
					<image src="/static/images/mall/more_address.png"></image>
				</view>
			</view> -->
			<!-- <view class="line"></view> -->
			<!-- <view class="item">
				<view class="title">支付宝</view>
				<text v-if="userInfo.alipay_user_id !=''">已绑定</text>
				<view class="status" v-else @click="bindalipay">
					<text>未绑定</text>
					<image src="/static/images/mall/more_address.png"></image>
				</view>
			</view> -->
		</view>
		<view class="btn" @click="confirmChange">确定修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					user_name: '',
					avatar: '',
					phone: '',
					open_id: '', //是否已绑定微信
					alipay_user_id: '' ,//是否已绑定支付宝
				},
				avatar:'',
				auth_code:''//支付宝授权码
			}
		},
		computed: {
			phoneNumber() {
				let phone = '';
				let reg = /^(\d{3})\d+(\d{4})$/;
				phone = this.userInfo.phone.replace(reg, "$1****$2");
				return phone;
			}
		},
		onLoad(options) {
			console.log("options: ",options);
			if(options.auth_code && options.auth_code!=undefined){
				this.auth_code = options.auth_code;
				this.getZfbindex();
			}else{
				this.getMysettinuserinfo();
			}
		},
		methods: {
			// 获取我的信息
			getMysettinuserinfo(){
				this.$api.mysettinuserinfo().then(res=>{
					this.userInfo = res;
					this.avatar = res.avatar1;
				})
			},
			//获取支付宝授权结果
			getZfbindex(){
				uni.showLoading({
					title:'加载中...'
				})
				this.$api.zfbindex({auth_code:this.auth_code}).then(res=>{
					uni.hideLoading();
					uni.showToast({
						title: '绑定成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.getMysettinuserinfo();
					},1000)
				})
			},
			openImage() {
				uni.chooseImage({
					count: 1,
					success: (data) => {
						let tempFilePaths = data.tempFilePaths[0];
						this.$request.uploadImage(tempFilePaths).then(res => {
							this.userInfo.avatar = res.url;
							this.avatar = res.url1;
						})
					}
				})
			},
			//绑定微信
			bindwechat() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (loginRes) => {
									console.log("loginRes: ",loginRes);
									this.$api.mywxbind({
										access_token: loginRes.authResult.access_token,
										openid: loginRes.authResult.openid
									}).then(bindRes => {
										uni.hideLoading();
										uni.showToast({
											title: '绑定成功',
											icon: 'none'
										})
										setTimeout(() => {
											this.getMysettinuserinfo();
										},1000)
									})
								},
								fail: (err) => {
									console.log("err: ",err);
									uni.hideLoading();
									uni.showToast({
										title: '绑定失败，请重试',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//绑定支付宝
			bindalipay() {
				let urls =
					'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003125676364&scope=auth_userinfo&redirect_uri=https://mh.mytshop.cn/app/redirect.html';
				urls = encodeURIComponent(urls); 
				// 判断平台
				if (plus.os.name == 'Android') {
					plus.runtime.openURL(
						'alipays://platformapi/startapp?appId=20000067&url=' + urls,
						res => {
							//这里写打开URL地址失败后的处理
							console.log("Android: ",res);
							uni.showModal({
								content: '尚未安装支付宝客户端，请安装后重试！',
								showCancel:false
							});
						},
						'com.eg.android.AlipayGphone'
					);
				} else if (plus.os.name == 'iOS') {
					plus.runtime.openURL(
				 	'alipay://platformapi/startapp?appId=20000067&url=' + urls,
						res => {
							console.log("iOS: ",res);
							uni.showModal({
								content: '尚未安装支付宝客户端，是否安装？',
								success: function(res) {
									if(res.confirm) {
										plus.runtime.openURL('https://apps.apple.com/cn/app/id333206289', function(e) {
										    console.log('Open system default browser failed: ' + e.message);
										});
									}
								}
							});
						},
						'com.eg.android.AlipayGphone'
					);
				}
			},
			//确认修改
			confirmChange() {
				this.$api.myupdateuserinfo({
					avatar:this.avatar,
					user_name:this.userInfo.user_name
				}).then(res=>{
					uni.showToast({
						title:'修改成功'
					})
					setTimeout(()=>{
						this.getMysettinuserinfo();
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: calc(var(--status-bar-height) + 80rpx) 0 30rpx;
	}

	.main {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 50rpx 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			@include between;
			height: 100rpx;

			.title {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: normal;
				color: #000000;
			}
			
			.input {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: normal;
				color: #000000;
				text-align: right;
			}

			.avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			image {
				width: 16rpx;
				height: 30rpx;
			}

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			.status {
				@include align-center;

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF6408;
					margin-right: 16rpx;
				}

				image {
					width: 12rpx;
					height: 24rpx;
				}
			}
		}

		.line {
			width: 630rpx;
			height: 1rpx;
			background-color: #E5E5E5;
		}
	}

	.btn {
		width: 560rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
		border-radius: 35rpx;
		@include center position: fixed;
		bottom: 280rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
